<template>
	<view>
		<view class="lunbotu">
			<swiper style="width: 750rpx; height: 750rpx;" :indicator-dots="true" :autoplay="false" :interval="3000" :duration="1000">
				<swiper-item v-if="shopval.storeInfo.video_url">
					<view class="swiper-item">
						<video loop="true" :show-fullscreen-btn="false" :show-play-btn="false" :play-btn-position="center" :poster="src"
						 class="videoBox" :src="shopval.storeInfo.video_url" controls></video>
					</view>
				</swiper-item>
				<swiper-item v-for="(item,index) in shopval.storeInfo.slider_image" :key="index">
					<view class="swiper-item">
						<image :src="item" mode="scaleToFill" style="width: 750rpx; height: 750rpx;"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="shopval">
			<view class="top">
				<text class="left">FCFA<text class="jiage">{{shopval.storeInfo.price}}</text></text>
				<text class="right">库存:{{shopval.storeInfo.stock ? shopval.storeInfo.stock : ''}}</text>
			</view>
			<view class="name">
				{{shopval.storeInfo.store_name ? shopval.storeInfo.store_name : ''}}
			</view>
			<view class="guige">
				{{shopval.storeInfo.store_info ? shopval.storeInfo.store_info :''}}
			</view>
		</view>
		<view class="tuwen">
			<image class="tuwen_img" src="../../static/fel/left.png" mode="scaleToFill"></image>
			<text class="tuwen_title">图文详情</text>
			<image class="tuwen_img" src="../../static/fel/right.png" mode="scaleToFill"></image>
		</view>
		<view class="tuwenimg">
			<rich-text :nodes="xiangqingHtml"></rich-text>
		</view>
		<!-- <view class="weikaishi btmbox" v-if="shopval.storeInfo.type === 0">
			暂未开始
		</view> -->
		<view class="qianggou btmbox" @click="getdingdan">
			立即抢购
		</view>
		<view class="guigeBox" v-if="guigeBox">
			<view class="getshop_box">
				<view class="top">
					<view class="getImg">
						<u-image width="178rpx" height="180rpx" :src="itemshop.image"></u-image>
					</view>
					<view class="get_center">
						<view class="get_center_top">
							{{shopval.storeInfo.store_name}}
						</view>
						<view class="get_center_center">
							{{itemshop.suk ?itemshop.suk :''}}
						</view>
						<view class="get_center_jiage">
							<text class="get_center_jiage_left">FCFA</text>
							<text class="get_center_jiage_right">{{itemshop.price}}</text>
						</view>
					</view>
					<view class="kucun">
						<view class="kucun_val">
							库存:{{itemshop.stock}}
						</view>
					</view>
					<view class="getshop_close_back" @click="guigeBox = false">
						<u-icon name="close" color="#fff"></u-icon>
					</view>
				</view>
				<view v-for="(item,index) in shopval.productAttr" :key='index'>
					<view class="guige">
						{{item.attr_name}}
					</view>
					<view class="xuanxiang">
						<u-row>
							<u-col span="4" v-for="(item1,index1) in item.attr_values" :key="index1">
								<view class="xuanxiangval" :class="[current[index] === index1 ? 'guigeactive' : '']" @click="getguige(item1,index1,index)">
									{{item1}}
								</view>
							</u-col>
						</u-row>
					</view>
				</view>
				<view class="guigebtm">
					<view class="goumai">
						<text>购买数量：</text>
						<label>
							<u-number-box v-model="value" :min='1' :disabled="true"></u-number-box>
						</label>
					</view>
					<view class="goumai_btnBox">
						<view class="lijigoumia goumai_btn" @click="lijigoumai">
							立即购买
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var _self;
	var graceRichText = require("../../static/richText.js");
	export default {
		data() {
			return {
				src: "https://cdn.uviewui.com/uview/example/fade.jpg",
				shopval: {
					name: "元绿锯片ASD1x500个",
					guige: "ASD1",
					jiage: "1000",
					kucun: "6000",
					img_1: "https://cdn.uviewui.com/uview/example/fade.jpg",
					state: 1
				},
				shopid: null,
				info: null,
				guigeBox: false,
				itemshop: null,
				current: [],
				guigearr: [],
				value: 1,
				xiangqingHtml: null

			};
		},
		onLoad(data) {
			this.shopid = data.id
			uni.getStorage({
				key: 'userinfo',
				success: (res) => {
					this.info = res.data
					this.getxiangqing()
				}
			})
		},
		methods: {
			getxiangqing() {
				uni.request({
					url: this.$AJAX_URL + 'goods/detail',
					method: 'POST',
					data: {
						id: this.shopid,
						uid: this.info.uid
					},
					success: (res) => {
						console.log(res);
						this.xiangqing = res.data.data
						this.shopval = res.data.data
						this.xiangqingHtml = graceRichText.format(res.data.data.storeInfo.description);
						if (this.xiangqing.productAttr.length) {
							for (var i = 0; i < this.shopval.productAttr.length; i++) {
								this.current.push(0)
								this.guigearr.push(this.shopval.productAttr[i].attr_values[0])
							}
							var key = this.guigearr.toString()
							this.itemshop = this.xiangqing.productValue[key]
							
						} else {
							this.itemshop = this.xiangqing.storeInfo
						}


					}
				})
			},
			lijigoumai() {
				var unique = '';
				var key = this.guigearr.toString()
				console.log(this.shopval.productValue[key].unique);
				console.log(key);
				if (Object.keys(this.shopval.productValue).length) {
					unique = this.shopval.productValue[key].unique;
				} else {
					console.log(false)
				}
				var data = this.shopval.storeInfo
				uni.request({
					url: this.$AJAX_URL + 'cart/now_buy',
					method: 'POST',
					data: {
						uid: this.info.uid,
						product_id: data.id,
						cart_num: this.value,
						unique: unique
					},
					success: (res) => {
						console.log(res);
						if (res.data.code === 200) {
							uni.navigateTo({
								url: '../dingdan/dingdan?id=' + res.data.data.cartId
							})
						} else {
							this.$u.toast(res.data.msg)
						}
					}
				})

			},
			getguige(item, index1, index) {
				this.guigearr[index] = item
				this.current.splice(index, 1, index1)
				var key = this.guigearr.toString()
				this.itemshop = this.xiangqing.productValue[key]
			},
			getdingdan() {
				// if (this.shopval.productAttr.length !== 0) {
				this.guigeBox = true
				// }
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.lunbotu {
		width: 100%;
		height: 750rpx;

		.swiper-item {
			height: 750rpx;

			.videoBox {
				width: 750rpx;
				height: 750rpx;
			}
		}
	}

	.shopval {
		background-color: #FFFFFF;
		height: 150rpx;
		padding-left: 22rpx;
		padding-right: 20rpx;

		.left {
			font-size: 30rpx;
			color: #FF392B;

			.jiage {
				font-size: 42rpx;
			}
		}

		.right {
			float: right;
			margin-top: 15rpx;
			color: #666666;
		}

		.name {
			font-size: 32rpx;
			color: #000000;
			margin-top: 10rpx;
		}

		.guige {
			font-size: 26rpx;
			color: #666666;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;

		}
	}

	.tuwen {
		height: 84rpx;
		line-height: 84rpx;
		text-align: center;
		background: #FFFFFF;
		margin-top: 10rpx;

		.tuwen_img {
			width: 52rpx;
			height: 16rpx;
			margin-left: 24rpx;
		}

		.tuwen_title {
			font-size: 30rpx;
			color: #FF6540;
			margin-left: 24rpx;
		}
	}

	.tuwenimg {
		width: 100%;
		height: auto;
		margin-bottom: 100rpx;
	}

	.btmbox {
		width: 750rpx;
		height: 98rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		text-align: center;
		line-height: 98rpx;
		position: fixed;
		bottom: 0;
	}

	.weikaishi {
		background-color: #666666;
	}

	.qianggou {
		background-color: #FF392B;
	}

	.guigeBox {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		margin: auto;
		background: rgba(0, 0, 0, 0.5);
		z-index: 10;

		.getshop_box {
			width: 100%;
			min-height: 800rpx;
			position: absolute;
			bottom: 0;
			background-color: #FFFFFF;
			border-radius: 30rpx 30rpx 0px 0px;
			padding-left: 20rpx;
			padding-right: 20rpx;

			.top {
				height: 180rpx;
				display: flex;
				margin-top: 22rpx;

				.getshop_close_back {
					width: 50rpx;
					height: 50rpx;
					position: absolute;
					right: 30rpx;
					top: 30rpx;
					background: #808080;
					border-radius: 50%;
					text-align: center;
					line-height: 50rpx;
				}

				.getImg {
					width: 178rpx;
					height: 180rpx;
				}

				.get_center {
					width: 332rpx;
					margin-left: 19rpx;
					position: relative;

					.get_center_top {
						font-size: 32rpx;
						color: #000000;
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.get_center_center {
						margin-top: 10rpx;
						color: #666666;
						font-size: 26rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						// color: #2699F2;
					}

					.get_center_jiage {
						position: absolute;
						bottom: 0;
						color: #FF423F;

						.get_center_jiage_left {
							font-size: 30rpx;
						}

						.get_center_jiage_right {
							font-size: 42rpx;
						}
					}
				}

				.kucun {
					position: relative;
					width: 180rpx;

					.kucun_val {
						position: absolute;
						bottom: 0;
						right: 0;
						font-size: 26rpx;
						color: #666666;
					}
				}
			}

			.guige {
				font-size: 32rpx;
				margin-top: 25rpx;
				color: #000000;
			}

			.xuanxiang {
				margin-top: 35rpx;

				.xuanxiangval {
					height: 88rpx;
					margin-bottom: 30rpx;
					background: #FBFBFB;
					text-align: center;
					line-height: 88rpx;
					font-size: 32rpx;
					color: #808080;
					border: 1px solid #E8E8E8;
					border-radius: 10rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					padding: 0 5rpx;
				}

				.guigeactive {
					background: #FFF2F2;
					border: 1px solid #FF423F;
					color: #FF423F;
				}
			}

			.guigebtm {
				height: 223rpx;
				border-top: 1px solid #E6E6E6;
				margin-left: -20rpx;
				margin-right: -20rpx;
				padding-left: 20rpx;
				padding-right: 20rpx;

				.goumai {
					margin-top: 33rpx;

					text {
						float: left;
					}

					label {
						float: right;
					}
				}

				.goumai_btnBox {
					position: absolute;
					width: 690rpx;
					bottom: 10rpx;
					display: flex;

					.goumai_btn {
						flex: 1;
						height: 88rpx;
						border-radius: 20rpx;
						text-align: center;
						line-height: 88rpx;
						color: #FFFEFE;
						font-size: 32rpx;
					}

					.pushche {
						background: linear-gradient(90deg, #FFC603 0%, #FF9606 100%);
					}

					.lijigoumia {
						margin-left: 10rpx;
						background: linear-gradient(90deg, #FE7704 0%, #FB4D06 100%);
					}
				}
			}


		}
	}
</style>
